/*
* @Author: zhaoyong
* @Date:   2017-11-18 14:19:44
* @Last Modified by:   zhaoyong
* @Last Modified time: 2017-11-19 15:41:44
*/

import React, {Component} from 'react';
import styles from './index.less';
import CSSModules from 'react-css-modules';
import {Route, Link} from 'react-router-dom';
import PageHeader from 'ant-design-pro/lib/PageHeader';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {Button, Dropdown, Avatar, Tag, Row, Col,Card} from 'antd';

const {Description} = DescriptionList;
const ButtonGroup = Button.Group;
import ReportList from './List';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: '',
      workOrderId: '',
    };
  }

  componentDidMount() {
    const {pathname} = this.props.location;
    this.setNavState(pathname);
  }
  componentWillReceiveProps(nextProps) {
    const {pathname} = nextProps.location;
    if (pathname !== this.props.location.pathname) {
      this.setNavState(pathname);
    }
  }

  setNavState = pathname => {
    const pathList = pathname.split('/');
    this.setState({
      userId: pathList[3],
      workOrderId: pathList[5],
    });
  };

  getHeaderMsg = () => {
    let breadcrumbList, title, action, description, tabList;
    const {userId, workOrderId} = this.state;

    title = '举报页';
    breadcrumbList = [
      {
        title: '举报页',
      },
    ];
    action = '';
    (description = ''), (tabList = null);
    return {
      title,
      breadcrumbList,
      action,
      description,
      tabList,
    };
  };

  // tab改变时触发
  handleTabChange = key => {
    console.log(key);
  };

  getPageHeader = () => {
    const {
      title,
      breadcrumbList,
      action,
      description,
      tabList,
    } = this.getHeaderMsg();

    return (
      <PageHeader
        title={title}
        action={action}
        content={description}
        breadcrumbList={breadcrumbList}
        linkElement={Link}
        tabList={tabList}
        onTabChange={this.handleTabChange}
        className={styles.pageHeader}
      />
    );
  };
  render() {
    const {match} = this.props;
    return (
      <div className={styles['home-wrap']}>
        {this.getPageHeader()}{' '}
        <Card style={{margin: 24}} bordered={false} >
          <ReportList query={location.search} />
        </Card>
      </div>
    );
  }
}

export default CSSModules(Home, styles);
